import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    ScrollView,
    Alert
} from 'react-native';
import {ListRow} from 'teaset'
import {Button} from 'react-native-ui-lib'
import {connect} from 'react-redux';
import {NavigationActions, StackActions} from "react-navigation";

import colors from "../common/colors";
import {logout} from '../actions/mineAction'
import UpdatePass from "./UpdatePass";
import Global from "../common/global";


class Settings extends Component {

    static navigationOptions = {
        headerTintColor: colors.headerText,
        headerTitle: '设置',
        headerStyle: {
            backgroundColor: colors.headerBg,
            borderBottomColor: colors.headerBottom,
            paddingTop: Global.paddingTop,
            height: Global.navigationHeaderHeight
        },
        headerTitleStyle: {
            alignSelf: 'center',
        },
        headerRight: <View/>,
        headerBackTitle: null
    }

    constructor(props) {
        super(props);

        this.state = {
            isLoading: false
        };
    }

    changeLoadingStatus = (flag) => {
        this.setState({
            isLoading: flag
        })
    }

    toUpdatePass = () => {
        this.props.navigation.navigate('UpdatePass')
    }

    logout = () => {
        Alert.alert(
            '退出登录',
            '确定要退出登录吗?',
            [
                {text: '取消', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
                {
                    text: '确定', onPress: () => {
                        this.props.dispatch(logout())
                        const resetAction = StackActions.reset({
                            index: 0,
                            actions: [NavigationActions.navigate({routeName: 'Login'})],
                        });
                        this.props.navigation.dispatch(resetAction);
                    }
                },
            ],
            {cancelable: false}
        )
    }

    render() {
        return (
            <View style={styles.container}>
                <ScrollView style={{flex: 1}}>
                    <ListRow
                        title={"修改登录密码"}
                        style={{height: 50}}
                        titleStyle={styles.listRowTitle}
                        bottomSeparator={"none"}
                        onPress={this.toUpdatePass}
                    />
                    <Button
                        fullWidth
                        label={"退出账号"}
                        marginT-100
                        onPress={this.logout}
                        backgroundColor={"#fff"}
                        labelStyle={{color: '#333333', fontSize: 16, fontWeight: 'bold'}}
                        style={{height: 50}}
                    />
                </ScrollView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: colors.bgColor,
    },
    listRowTitle: {
        color: '#333333',
        fontWeight: 'bold',
        fontSize: 16
    }
});


function select(state) {
    return {
        User: state.User,
    }
}

export default connect(select)(Settings);